import { Avatar, Button, FormItem, Input, Tag, type TableColumnType } from 'ant-design-vue'
import type { Dayjs } from 'dayjs'
import type { List } from './index.d'

enum Tab {
	ask = '问答',
	share = '分享',
	job = '招聘',
	good = '精华'
}

export function useList({ filter }) {
	const rowKey = 'id'
	const { list, loading, pagination, reset, query, selected, onSelectChange, onTableChange } = useTable<List>({
		rowKey,
		params: filter,
		url: urls.fetchList,
		refreshPageOnShow: true,
		onSuccess() {
			list.value.forEach(item => {
				item.title = item.title + '😊'
			})
		}
	})

	const columns: TableColumnType<List>[] = [
		{
			title: '标题',
			dataIndex: 'title',
			ellipsis: true,
			width: 350,
			customRender: ({ record }) => `🙂${record.title}`
		},
		{
			title: '作者信息',
			dataIndex: 'author',
			customRender: ({ record }) => <Avatar src={record?.author?.avatar_url} />
		},
		{
			title: '类别',
			dataIndex: 'tab',
			customRender: ({ text }) => <Tag color="cyan">{Tab[text]}</Tag>
		},
		{
			title: '浏览',
			dataIndex: 'visit_count',
			sorter: true,
			defaultSortOrder: 'descend',
			sortDirections: ['ascend', 'descend', 'ascend']
		},
		{
			title: '回复',
			dataIndex: 'reply_count'
		},
		{
			title: '操作',
			dataIndex: 'action',
			customRender: ({ record }) => {
				const { id, title } = record
				return <Button type="link">查看</Button>
			}
		}
	]

	return {
		rowKey,
		list,
		loading,
		pagination,
		reset,
		query,
		selected,
		onSelectChange,
		onTableChange,
		columns
	}
}

export function useFilter() {
	const filterFields: FormFields = reactive([
		{
			field: 'custom',
			initValue: '123123',
			render({ model, submit, getField }) {
				return (
					<FormItem label="自定义">
						<Input
							placeholder="请输入自定义字段"
							v-model:value={model.custom}
							onChange={() => {
								const name = getField('uname')
								// console.log('🚀 ~ name:', name)
								// console.log("🚀 ~ query:", submit)
								// console.log("🚀 ~ model:", model)
							}}
						/>
					</FormItem>
				)
			}
		},
		{
			type: 'input',
			field: 'uname',
			label: '用户名',
			initValue: 'initValue',
			fieldProps: {
				placeholder: '请输入用户名',
				prefix: 'qweqwe'
			}
		},
		{
			type: 'select',
			field: 'tab',
			label: '类别',
			initValue: '',
			fieldProps: ({ submit }) => ({
				placeholder: '请选择类别',
				options: [
					{
						value: '',
						label: '全部'
					},
					{
						value: 'good',
						label: '精华'
					},
					{
						value: 'share',
						label: '分享'
					},
					{
						value: 'ask',
						label: '问答'
					},
					{
						value: 'job',
						label: '招聘'
					}
				],
				onChange: () => submit?.()
			})
		},
		{
			type: 'inputNumber',
			field: 'price',
			label: '价格',
			fieldProps: {
				placeholder: '价格',
				style: { width: '100%' },
				precision: 2
			}
		},
		{
			type: 'cDateRange',
			field: ['startDate', 'endDate'],
			span: 12,
			label: '时间',
			fieldProps: {
				valueFormat: 'YYYY-MM-DD HH:mm:ss',
				placeholder: ['活动开始时间', '活动结束时间'],
				showTime: true
			}
		}
	])

	const filter = useModel(filterFields)

	return {
		filter,
		filterFields
	}
}

export const selectValue = [
	{
		value: '11111',
		label: 'Jack'
	},
	{
		value: '2222',
		label: 'Lucy'
	},
	{
		value: '3333',
		label: 'yiminghe'
	}
]

export interface FormData {
	name: string
	region: string | undefined
	date: Dayjs | undefined
	delivery: boolean
	type: string[]
	resource: string
	desc: string
	img: string[]
	title?: string
	img2: string
}

export function useCreateForm() {
	const formRef = ref<FormInstance>()
	const formFields: FormFields = reactive([
		{
			type: 'title',
			field: '这是一个测试title',
			formItemProps: {
				wrapperCol: { span: 24, offset: 4 }
			}
		},
		{
			field: 'username',
			render({ model, getField }) {
				return (
					<FormItem
						label="Username"
						name="username"
						rules={[{ required: true, message: 'Please input your username!' }]}
					>
						<Input v-model:value={model.username} />
					</FormItem>
				)
			}
		},
		{
			field: 'renderField',
			label: 'renderField',
			renderField({ model, getField }) {
				return <Input v-model:value={model.renderField} />
			}
		},
		{
			type: 'treeSelect',
			field: 'tree',
			label: 'treeSelect',
			fieldProps: {
				treeCheckable: true,
				treeDefaultExpandAll: true
			},
			query() {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve([
							{
								label: 'Node1',
								value: '0-0',
								children: [
									{
										label: 'Child Node1',
										value: '0-0-0'
									}
								]
							},
							{
								label: 'Node2',
								value: '0-1',

								children: [
									{
										label: 'Child Node3',
										value: '0-1-0',
										disabled: true
									},
									{
										label: 'Child Node4',
										value: '0-1-1'
									},
									{
										label: 'Child Node5',
										value: '0-1-2'
									}
								]
							}
						])
					}, 1500)
				})
			}
		},
		{
			type: 'input',
			field: 'name',
			label: '姓名',
			formItemProps({ model }) {
				return {
					rules: {
						required: true,
						trigger: 'change',
						validator() {
							if (model.region === 'shanghai') {
								return Promise.reject('请填写上海的名称')
							} else {
								return Promise.resolve()
							}
						}
					}
				}
			},
			renderDepend({ model, getField }) {
				const name = getField('name')
				// @ts-expect-error
				;(name.fieldProps as FieldProps).placeholder = model.region
			},
			fieldProps: {
				placeholder: '请输入'
			}
		},
		{
			type: 'select',
			field: 'region',
			label: 'Activity zone',
			formItemProps: {
				rules: { required: true, message: 'Please select Activity zone', trigger: 'change' }
			},
			fieldProps({ getField, model }) {
				return {
					onChange() {
						const type = getField('type')
					}
				}
			},
			query() {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve([
							{
								label: 'shanghai',
								value: 'shanghai'
							},
							{
								label: 'beijing',
								value: 'beijing'
							}
						])
					}, 3000)
				})
			}
		},
		{
			type: 'cascader',
			field: 'cascader',
			label: '省份',
			fieldProps: {
				placeholder: '请选择区域',
				expandTrigger: 'hover',
				showSearch: true,
				options: [
					{
						value: 'zhejiang',
						label: 'Zhejiang',
						children: [
							{
								value: 'hangzhou',
								label: 'Hangzhou',
								children: [
									{
										value: 'xihu',
										label: 'West Lake'
									}
								]
							}
						]
					},
					{
						value: 'jiangsu',
						label: 'Jiangsu',
						children: [
							{
								value: 'nanjing',
								label: 'Nanjing',
								children: [
									{
										value: 'zhonghuamen',
										label: 'Zhong Hua Men'
									}
								]
							}
						]
					}
				]
			}
		},
		{
			type: 'date',
			field: 'date',
			label: 'Activity time',
			formItemProps: {
				rules: {
					required: true,
					message: 'Please pick a date',
					trigger: 'change',
					type: 'string'
				}
			},
			fieldProps: {
				placeholder: 'Pick a date',
				valueFormat: 'YYYY-MM-DD'
			}
		},
		{
			type: 'switch',
			field: 'delivery',
			label: 'Instant delivery'
		},
		{
			type: 'checkboxGroup',
			field: 'type',
			label: 'Activity type',
			formItemProps: {
				rules: {
					type: 'array',
					required: true,
					message: 'Please select at least one activity type',
					trigger: 'change'
				}
			},
			query() {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve([
							{
								label: 'Online',
								value: '1',
								disabled: true
							},
							{
								label: 'Promotion',
								value: '2'
							},
							{
								label: 'Offline',
								value: '3'
							}
						])
					}, 1500)
				})
			}
		},
		{
			type: 'inputTag',
			field: 'InputTag',
			label: 'InputTag',
			formItemProps: {
				rules: {
					required: true,
					trigger: ['blur', 'change'],
					type: 'array',
					message: '请添加InputTag'
				}
			},
			fieldProps: {
				placeholder: '请添加啊'
			}
		},
		{
			type: 'radioGroup',
			field: 'resource',
			label: 'Resources',
			query() {
				return new Promise(resolve => {
					setTimeout(() => {
						resolve([
							{
								label: 'Sponsor',
								value: '1'
							},
							{
								label: 'Venue',
								value: '2',
								disabled: true
							}
						])
					}, 1000)
				})
			}
		},
		{
			type: 'title',
			field: '另外一个测试title',
			formItemProps: {
				wrapperCol: { span: 24, offset: 4 }
			}
		},
		{
			type: 'slider',
			field: 'slider',
			label: 'slider',
			fieldProps: {
				marks: {
					0: '0',
					20: '20',
					40: '40',
					60: '60',
					80: '80',
					100: '100'
				}
			}
		},
		{
			type: 'rate',
			field: 'rate',
			label: '评分',
			formItemProps: {
				rules: {
					required: true,
					message: '请打分',
					trigger: 'change',
					type: 'number',
					min: 0.5
				}
			},
			fieldProps: {
				count: 10,
				allowHalf: true
			}
		},
		{
			field: 'desc',
			type: 'textarea',
			label: 'Activity form',
			formItemProps: {
				rules: { required: true, message: 'Please input activity form', trigger: 'blur' }
			}
		},
		{
			field: 'img',
			type: 'uploadImg',
			label: '图片',
			formItemProps: {
				extra: '上传说明呢',
				rules: { required: true, message: '图片为必传', trigger: 'change' }
			},
			fieldProps: {
				maxCount: 10,
				showUploadList: {
					showDownloadIcon: true
				}
			}
		},
		{
			field: 'img2',
			type: 'uploadImg',
			label: '单个图片上传',
			formItemProps: {
				extra: '这是单个图片上传呢',
				rules: [{ required: true, message: '必须传图片呢', trigger: 'change' }]
			},
			fieldProps: {
				valueType: 'string',
				showUploadList: {
					showDownloadIcon: true
				},
				class: 'sdfasdf',
				style: {}
			}
		}
	])

	const formModel = useModel(formFields)

	return { formRef, formFields, formModel }
}
